<template>
  <Drawer
    class="custom-drawer"
    :width="width"
    :title="title"
    :value="value"
    :closable="closable"
    :mask-closable="maskClosable"
    :styles="styles"
    @on-visible-change="visibleChange">
    <div v-if="$slots.header" slot="header">
      <slot name="header" />
    </div>
    <slot />
  </Drawer>
</template>

<script>
export default {
  emits: ['input'],
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    closable: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: false
    },
    styles: {
      type: Object,
      default: () => ({})
    },
    width: {
      type: [String, Number]
    }
  },
  data () {
    return {

    }
  },
  methods: {
    visibleChange (bol) {
      this.$emit('input', bol)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
